<template>
<div>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>直播管理</el-breadcrumb-item>
    </el-breadcrumb>
    <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">直播管理</h3>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="直播名称：">
        <el-input v-model="name" placeholder="请输入搜素课程名称"></el-input>
      </el-form-item>
      <el-form-item label="直播状态：">
        <el-select v-model="Sid" placeholder="请选择直播状态">
          <el-option label="请选择直播状态" value="0"></el-option>
          <el-option label="进行中" value="1"></el-option>
          <el-option label="已结束" value="3"></el-option>
          <el-option label="未开始" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="searchAgain">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="add">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="delBatch">批量删除</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card style="margin-top: 20px">
    <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">直播列表</h3>
    <el-table
        :data="liveList"
        style="width: 100%"
        @selection-change="selectionChange">
      <el-table-column
          type="selection"
          width="60px">
      </el-table-column>
      <el-table-column
          prop="livename"
          label="直播名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="livecover"
          label="课程封面"
          width="180">
        <template slot-scope="scope">
          <img :src="nginxUrl+scope.row.livecover" style="width: 50px;height: 50px;border-radius: 50%" />
        </template>
      </el-table-column>
      <el-table-column
          prop="launchTime"
          label="直播商品状态"
          width="180">
        <template slot-scope="scope">
          <span v-text="scope.row.launchTime ==1 ?'已上架':'已下架'"></span>
        </template>
      </el-table-column>
      <el-table-column
          prop="livestarttime"
          label="开始时间"
          width="180">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <el-button-->
<!--              size="mini"-->

<!--              @click="date(scope.row.id)">数据</el-button>-->
          <el-button
              size="mini"
              type="warning"
              @click="update(scope.row)">编辑</el-button>

          <el-button
              size="mini"
              type="primary"
              @click="Unshelve(scope.row)">下架</el-button>

          <el-button
              size="mini"
              type="danger"
              @click="removeLiveById(scope.row.id)">删除</el-button>
<!--              @click="removeLiveById(scope.row.id)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10 , 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
  </el-card>


</div>
</template>

<script>
import axios from "axios";

export default {
  name: "Live",
  data(){
    return {
      liveIds:[],
      imageUrl:'',
      nginxUrl:this.$MyUrl.imgUrl+"course/",
      uploadUrl:this.$MyUrl.serverUrl + "live/upload",
      name:'',
      Sid:null,
      liveList:[],
      pageNum: 1,
      pageSize: 5,
      total: 0,
    }
  },
  methods:{
    //下架
    Unshelve(row){
      if(row.launchTime!=1){
        this.$message({
          type:"error",
          message:"该直播商品还未上架~",
          duration:1000
        });
      }else {
        this.$confirm('此操作将下架该直播商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

              let url="live/Unshelve/"+row.id;
              this.$axios.put(url)
                  .then(res=>{
                    if (res.data.code == 200){
                      this.$message({
                        type:"success",
                        message:res.data.msg,
                        duration:1000
                      });
                      //刷新页面
                      this.searchAgain();
                    }else {
                      this.$message({
                        type:"error",
                        message:res.data.msg,
                        duration:1000
                      });
                    }
                  })
            }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });
        });
      }

    },
    removeLiveById(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
            let url="live/del/"+id;
            this.$axios.delete(url)
                .then(res=>{
                  if (res.data.code == 200){
                    this.$message({
                      type:"success",
                      message:res.data.msg,
                      duration:1000
                    });

                    //刷新页面
                    this.searchAgain();
                  }else {
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    });
                  }
                })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

          }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //批量删除
    delBatch(){
      // alert(this.liveIds);
      if (this.liveIds.length<1){
        this.$message({
          type:"error",
          message:"请至少选择一个数据",
          duration:1000
        })
      }else {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params={ids:this.liveIds}
          let url="live/delBatch";
          axios({
            url:url,
            method:"delete",
            params:params,
            paramsSerializer:params=>{
              return this.$qs.stringify(params,{indices:false})
            }
          }).then(res=>{
            if (res.data.code == 200){
              this.$message({
                type:"success",
                message:res.data.msg,
                duration:1000
              });

              //刷新页面
              this.getLiveList();
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration:1000
          });
        });
      }
    },
    search(){
      this.pageNum = 1;
      this.getLiveList();
    },
    //重置 查询
    searchAgain(){
      this.name="";
      this.Sid="";
      this.getLiveList();
    },
    // 单个删除直播信息
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
            let url="live/del/"+id;
            this.$axios.delete(url)
                .then(res=>{
                  if (res.data.code == 200){
                    this.$message({
                      type:"success",
                      message:res.data.msg,
                      duration:1000
                    });
                    //刷新页面
                    this.getLiveList();
                  }else {
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    });
                  }
                })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //新增
    add(){
      this.$router.push("/LiveAdd");
    },
    //跳转到数据分析页面
    date(id){
      this.$router.push("/LiveDate",this.id);
    },
    //编辑
    update(row){
      console.log("123")
      console.log(row)
      console.log("123")
      // let livename=row
      // sessionStorage.setItem("live", JSON.stringify(row));
      // this.$router.push("/LiveUpdate")
      this.$router.push({
        path:"/LiveUpdate",
        query:{
          livename:row.livename,
          id:row.id
        }
      })
    },
    //查询直播
    getLiveList() {
      let url = "live/liveList";
      this.$axios.get(url, {
        params: {
          name:this.name,
          now: this.pageNum,
          size: this.pageSize,
          Sid:this.Sid
        }
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res)
          this.liveList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    //获取选中的ids
    selectionChange(val){
      this.liveIds = [];
      //清空ids中的id
      for (let e of val){
        this.liveIds.push(e.id);
      }
    },
    //更改每页多少条数据
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getLiveList();
    },
    //换页
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getLiveList();
    },
  },
  created() {
    this.getLiveList();
  }

}
</script>

<style scoped>

</style>